<template>
    <van-nav-bar
  title="我的"
  right-text="设置"
  @click="onClickRight"
/>
<div class="center-container">
  <div class="center-info">
    <van-image class="center-headimg"
    radius="20px"
  width="120"
  height="120"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
    <div class="center-text"  >
    <p>{{ use.useStore.userName }}</p>
    <p>{{ use.useStore.sex }} {{ use.useStore.age }}岁</p>
    <p>{{ use.useStore.phone.substring(0,3) }}****{{ use.useStore.phone.substring(7,11) }}</p>
    <p style="background-color: aquamarine; width: 50px;">{{ use.useStore.disease }}</p>
    <el-button @click="Healeh()" type="primary" size="small" >健康档案</el-button>
    </div>
  </div>
<div style="width: 100%;">
<van-button type="default" icon='orders-o' style="width: 34%;" to="/Outpatient" >就诊记录</van-button>
<van-button type="default" icon='friends-o' style="width: 33%;"to="/Equipment">我的设备</van-button>
<van-button type="default" icon='star-o' style="width: 33%;"to="/home">我的收藏</van-button>
</div>
  <div>
    <van-cell title="签约记录" icon='sign'  is-link to="about" />
    <van-cell title="健康检测" icon='completed' is-link to="/Healthy" />
    <van-cell title="服务包" icon='add-square' is-link to="serve" />
  </div>
</div>
  <van-tabbar v-model="active">
    <!-- 底部导航保持不变 -->
    <van-tabbar-item icon="home-o" :to="'/HomePage'">首页</van-tabbar-item>
  <van-tabbar-item icon="column" :to="'/Health'">科普</van-tabbar-item>
  <van-tabbar-item icon="description" :to="'/messages'">消息</van-tabbar-item>
  <van-tabbar-item icon="contact" :to="'/Setup'">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script lang="ts" setup>
//import { showToast } from 'vant';
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter';
import { useRouter } from 'vue-router';
const Healeh=()=>{
  router.push('/PatientInfo')
}
const router = useRouter();
const use = useCounterStore();
const me=ref([])
  const onClickRight = () => {
    router.push('/set');
  }
 const active = ref(3);

  onMounted(() => {
    active
   // onClickRight()
  })
</script>
<style scoped>
.center-container {
background-image: linear-gradient(135deg, #d4f5e0 10%, #5961F9 100%) !important;
width:100%;
height: 600px;
}
.center-info{
display:flex;
}
.center-headImg {
margin-top: 20px;
margin-left: 20px;
}
.center-text {
margin: 20px;
}
.center-text p {
line-height: 10px;
text-align: left;
font-size: 16px;
font-family:楷体;
}
</style>